<template>
  <div class="body">
    <header-com :backable="true" :preview="true" :showUser="true">
      <template v-slot:formName>
        {{ Topname }}
      </template>
      <template v-slot:icon>
        <!-- 顶部上方电脑和手机图标 -->
        <div class="previewIcon">
          <!-- 这里动态绑定class以展示下方高亮 -->
          <img :class="{'computer':true,'active': computerIndex}" @click="changeComputerPreview"
               src="">
          <img :class="{'phone':true,'active':phoneIndex}" @click="changePhonePreview"
               src="">
        </div>
      </template>
    </header-com>
    <show-com v-if="computerIndex" />
    <phone-show-com v-if="phoneIndex" />
  </div>
</template>

<script lang="ts">
import {computed, defineComponent, inject, onMounted, provide, ref} from 'vue';
import ShowCom from './ShowDesktopCom.vue';
import {useRoute, useRouter} from "vue-router";
import PhoneShowCom from './ShowPhoneCom.vue';

export default defineComponent({
  name: 'preview-com',
  components: {
    ShowCom,
    PhoneShowCom
  },

  setup() {
    const router = useRouter();
    const route = useRoute();
    // 记录点击电脑图标的ID
    let computerIndex = ref<boolean>(true);
    // 记录点击手机图标的ID
    let phoneIndex = ref<boolean>(false);
    let formId = route.query.id?.toString()
    const ctgName = inject('ctgName') as any;
    //表单
    let form = inject('form') as any;
    // 点击电脑图标显示电脑端部分
    const changeComputerPreview = () => {
      computerIndex.value = true;
      phoneIndex.value = false;
    };
    // 点击手机图标显示移动端部分
    const changePhonePreview = () => {
      computerIndex.value = false;
      phoneIndex.value = true;
    };

    //顶部显示的是新建表单还是title
    const Topname = computed(() => {
      return ctgName.value === '继续编辑' && form.value.title ? form.value.title : '新建表单';
    });

    //监测刷新按钮的时候回退到编辑页面，但还是没数据
    onMounted(() => {
      window.addEventListener("load", () => {
        router.back();
      });
    });

    provide('formId', formId);

    return {
      computerIndex,
      phoneIndex,
      Topname,
      changeComputerPreview,
      changePhonePreview,
    }
  }
})

</script>

<style lang="scss" scoped>
.body {
  width: 100%;
  // height: calc(100vh - 152px);
  background-color: #f2f4f7;
  .previewIcon {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      .active {
        border-bottom: 2px solid #1488ed;
        padding-bottom: 14px;
      }
        img {
          width: 24px;
          padding: 16px 0;
          margin: 0 13px;
          cursor: pointer;
        }
    }
}
</style>
